<template>
	<div class="aa">
		<div class="bb" v-show="showHeader" @click="backhome">
			<span class="iconfont iconxiazai6 jiantou"></span>
		</div>
		<div class="header" v-show="!showHeader" :style="styleOpacity">
			<div class="heade-left">
				<span class="iconfont iconxiazai6"></span>
			</div>
			<p>秦始皇陵博物院（兵马俑）</p>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				showHeader:true,
				styleOpacity:{
					opacity:0,
				}
			}
		},
		methods:{
			backhome(){
				this.$router.push("/")
			}
		},
		mounted(){
			window.addEventListener("scroll",()=>{
				let top = document.documentElement.scrollTop;
				if(top>5){
					let opacity = top / 150;
					opacity = opacity > 1 ? 1 : opacity;
					this.styleOpacity.opacity = opacity;
					this.showHeader = false;
				}else{
					this.showHeader = true;
				}
			})
		}
	}
</script>
<style scoped lang="stylus">
@import "~@/assets/css/common.styl"
	a{
		color:#fff;
	}
	.header{
		display: flex;
		background-color: $bgcolor;
	}
	.aa{
		position: fixed;
		width: 100%;
		z-index: 999999;

	}
	.bb{
		position: absolute;
		top:.1rem;
		left:.1rem;
		color: #fff;
		font-size: .36rem;
		width: .72rem;
		line-height: .72rem;
		text-align: center;
		border-radius: .36rem;
		background-color: #000;
	}
	.jiantou{
		font-size: .36rem;
	}
	.header p{
		flex:1;
	    font-size: .32rem;
	    text-align: center;
	    color: #fff;
   		line-height: .88rem;
	}
	.heade-left{
		display: inline-block;
	    width: .4rem;
	    line-height: .88rem;
	    padding: 0 .2rem;
	    color: #fff;
	    font-size: .36rem;
	    text-align: left;
	}
</style>